<template>
  <div class="sale_page">
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.back()" />
    <div class="sale_content"><p>房源信息</p></div>
    <!-- 小区名称 -->
    <van-cell
      title="小区名称"
      is-link
      to="/search"
      value="请输入租小区名称"
      v-model="community"
    />
    <!-- 租金 -->
    <van-cell-group>
      <van-field label="租金" placeholder="请输入租金/月" v-model="money" />
    </van-cell-group>
    <!-- 建筑面积 -->
    <van-cell-group>
      <van-field label="建筑面积" placeholder="请输入建筑面积" v-model="area" />
    </van-cell-group>
    <!-- 户型 -->
    <div class="">
      <van-field
        is-link
        name="roomType"
        :value="roomType"
        label="户型"
        placeholder="请选择"
        @click="showType"
      />
      <van-popup v-model="roomChoose" position="bottom">
        <van-picker
          show-toolbar
          :columns="roomColumns"
          @confirm="subRoomType"
          @cancel="roomChoose = false"
        />
      </van-popup>
    </div>
    <!-- 所在楼层 -->
    <div class="">
      <van-field
        is-link
        name="floorType"
        :value="floorType"
        label="所在楼层"
        placeholder="点击选择城市"
        @click="showFloorType"
      />
      <van-popup v-model="floorChoose" position="bottom">
        <van-picker
          show-toolbar
          :columns="floorColumns"
          @confirm="subFloorType"
          @cancel="floorChoose = false"
        />
      </van-popup>
    </div>
    <!-- 朝向 -->
    <div class="">
      <van-field
        is-link
        name="orientedType"
        :value="orientedType"
        label="朝向"
        placeholder="点击选择城市"
        @click="showOrientedType"
      />
      <van-popup v-model="orientedChoose" position="bottom">
        <van-picker
          show-toolbar
          :columns="orientedcolumns"
          @confirm="subOrientedType"
          @cancel="orientedChoose = false"
        />
      </van-popup>
    </div>
    <!-- 房屋标题 -->
    <div class="sale_content1"><p>房屋标题</p></div>
    <van-field
      autosize
      v-model="houseTitle"
      type="textarea"
      placeholder="请输入标题(例如:整租小区名2室5000元)"
    />

    <!-- 房屋图像 -->
    <div class="sale_content1">
      <p>房屋图像</p>
      <van-field name="uploader" label="">
        <template #input>
          <van-uploader v-model="fileList" multiple />
        </template>
      </van-field>
    </div>

    <!-- 房屋配置 -->
    <div class="sale_content1"><p>房屋配置</p></div>
    <van-grid :column-num="5" :border="false">
      <van-grid-item
        v-for="item in supporting"
        :key="item"
        icon="gift-o"
        :text="item"
      />
    </van-grid>
    <!-- 房屋描述 -->
    <div class="sale_content1"><p>房屋描述</p></div>
    <van-field
      autosize
      type="textarea"
      placeholder="请输入房屋描述信息"
      v-model="description"
    />
    <!-- 底部 -->
    <div class="detail_bottom">
      <van-button type="default">取消</van-button>
      <van-button type="info">确认</van-button>
    </div>
  </div>
</template>
<script>
import { getHousePar, houseImg, HouseSubmit } from '@/api/house'
export default {
  name: 'sale_page',
  data () {
    return {
      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      community: '' || this.$route.query.data,
      list: '',
      money: '',
      area: '',
      // 户型
      roomType: '',
      roomChoose: false,
      roomColumns: ['一室', '二室', '三室', '四室', '四室+'],
      // 所在楼层
      floorType: '',
      floorChoose: false,
      floorColumns: ['高楼层', '中楼层', '低楼层'],
      // 朝向
      orientedType: '',
      orientedChoose: false,
      orientedcolumns: ['东', '南', '西', '北', '东南', '西北', '东北', '西南'],
      houseTitle: '',
      supporting: [
        '电视',
        '冰箱',
        '洗衣机',
        '空调',
        '热水器',
        '床',
        '暖气',
        '宽带',
        '衣柜',
        '天然气'
      ],
      description: '',
      fileList: []
    }
  },
  methods: {
    cancel () {
      this.community = ''
      this.money = ''
      this.area = ''
      this.roomChoose = ''
      this.floorChoose = ''
      this.orientedChoose = ''
      this.houseTitle = ''
      this.description = ''
      this.fileList = ''
    },

    async onSubmit (values) {
      values.community = 'AREA|5ce20146-e3fe-e919'
      values.roomType = 'ROOM|20903ae0-c7bc-f2e2'
      values.floor = 'FLOOR|1'
      values.oriented = 'ORIEN|61e99445-e95e-7f37'
      values.supporting = '空调'
      const fd = new FormData()
      fd.append('file', this.fileList[0].file)
      const data = await houseImg(fd)
      console.log(data)
      values.houseImg = data[0]
      HouseSubmit(values)
    },

    // 户型选择方法
    subRoomType (value) {
      this.roomType = value
      this.roomChoose = false
    },
    // 所在楼层提交方法
    subFloorType (value) {
      this.floorType = value
      this.floorChoose = false
    },
    // 朝向提交方法
    subOrientedType (value) {
      this.orientedType = value
      this.orientedChoose = false
    },

    // 户型
    showType () {
      this.roomChoose = true
    },
    // 所在楼层
    showFloorType () {
      this.floorChoose = true
    },
    // 朝向
    showOrientedType () {
      this.orientedChoose = true
    }
  },

  // 房屋所需条件请求
  async created () {
    const data = await getHousePar()
    this.list = data.body
    console.log(data.body)
  }
}
</script>
<style lang="less" scoped>
.sale_page {
  margin-bottom: 50px;
}
/deep/.van-nav-bar__content {
  background-color: #21b97a;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
.sale_content {
  padding: 0 15px;
  color: #21b97a;
  font-size: 15px;
  border-bottom: 1px solid #ddd;
}
.sale_content1 {
  padding: 0px 15px;
  font-size: 15px;
  border-bottom: 1px solid #ddd;
}
// 底部
.detail_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
}
.van-button {
  width: 187px;
  height: 50px;
  font-size: 17px;
}
</style>
